<script lang="ts" setup>
import { defineProps } from "vue";
import defaultImg from "../../../assets/logo.png";

defineProps(["picUrl", "name", "trackCount", "id"])
// 注册局部自定义指令
const vLazy = {
  mounted(el: HTMLImageElement, binding: any) {
    // el表示使用指令的DOM元素
    // bindings表示指令相关的信息是一个对象 如v-lazy="xxx",bindling即是xxx对应的内容
    // 指令的功能：实现图片的懒加载
    // 1、监听图片是否进入可视区
    const observer = new IntersectionObserver(([{ isIntersecting }]) => {
      // true；进入可视区域，false：未进入可视区域
      if (isIntersecting) {
        // 1、给图片的src属性赋值图片的地址
        el.src = binding.value
        // 2、取消图片的监听，默认是会一直监听的，如果不取消。就会一直执行
        observer.unobserve(el)
        // 3、加载的图片失败了，显示默认的图片地址
        el.onerror = () => {
          el.src = defaultImg
        }
      }
    }, {
      threshold: 0
    })
    observer.observe(el)
  },
};
</script>

<template>
  <div class="songItem">
    <router-link :to="`/SongListDetail/${id}`">
      <div class="imgWrap">
        <img class="itemBkImg" v-lazy="`${picUrl}`" alt="" />
        <div class="playBtn">
          <img src="../../../assets/playimg.png" alt="">
        </div>
      </div>
    </router-link>
    <p class="songListDesc">{{ name }}</p>
    <p class="songListDesc">{{ trackCount }}首</p>
  </div>
</template>

<style lang="scss" scoped>
// 歌单的每一项
.songItem {
  position: relative;
  width: 18%;
  margin-right: 15px;
  margin-bottom: 15px;

  .imgWrap {
    position: relative;
    overflow: hidden;
    border-radius: 4px;


    .itemBkImg {
      width: 100%;
      height: 140px;
      max-height: 211px;
      border-radius: $borderRadius8;
    }

    .playBtn {
      display: inline-block;
      opacity: 0;
      position: absolute;
      right: 8px;
      bottom: 12px;
      width: 30px;
      height: 30px;
      background-color: $theme-white;
      border-radius: 50%;
      transition: 1s;

      img {
        position: absolute;
        top: 1px;
        right: 0;
        bottom: 0;
        left: 3px;
        margin: auto;
        width: 24px;
        height: 24px;
      }
    }

    &:hover .topInfomation {
      transform: translateY(0%);
    }

    &:hover .playBtn {
      opacity: 1;
    }
  }

  .songListDesc {
    font-family: $textFont;
    font-size: $font-size-sm;
    line-height: 20px;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

// 歌单图片响应式设置
@media screen and (min-width: 1100px) {
  .itemBkImg {
    height: 150px !important;
  }
}

@media screen and (min-width: 1130px) {
  .itemBkImg {
    height: 157px !important;
  }
}

@media screen and (min-width: 1160px) {
  .itemBkImg {
    height: 162px !important;
  }
}

@media screen and (min-width: 1190px) {
  .itemBkImg {
    height: 164px !important;
  }
}

@media screen and (min-width: 1220px) {
  .itemBkImg {
    height: 170px !important;
  }
}

@media screen and (min-width: 1250px) {
  .itemBkImg {
    height: 176px !important;
  }
}

@media screen and (min-width: 1280px) {
  .itemBkImg {
    height: 182px !important;
  }
}

@media screen and (min-width: 1310px) {
  .itemBkImg {
    height: 188px !important;
  }
}

@media screen and (min-width: 1340px) {
  .itemBkImg {
    height: 194px !important;
  }
}

@media screen and (min-width: 1370px) {
  .itemBkImg {
    height: 200px !important;
  }
}

@media screen and (min-width: 1400px) {
  .itemBkImg {
    height: 206px !important;
  }
}

@media screen and (min-width: 1430px) {
  .itemBkImg {
    height: 210px !important;
  }
}
</style>
